<template>
    <div class="wu_liu">
        <div class="title">
            <img @click="go_back" style="width: 25px;height: 25px;" class="left" src="../lmx/image/return.png" alt="">
            <div class="right">
                <span>交易物流</span>
                <span>举报</span>
            </div>
        </div>
        <div ref="xia" class="xia">
            <div class="main">
                <div @click="ding_dan" v-for="i in 2" class="mag_one">
                    <div class="one_side">
                        <div class="state">
                            <span>订单已取消</span>
                        </div>
                        <div class="mag_side">
                            <img style="width: 50px;height: 50px;" src="../lmx/image/11.jpeg" alt="">
                            <span class="zi">ewofwioevowovnvownennwpvnwiEOVPWEVNOWINOVNOWBIEBVOOVNOWBIEBV</span>   
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref ,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
const router = useRouter()
const xia = ref()
onMounted(()=>{
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    var vdaH = h - 50 + "px"
    const boxBa = xia.value
    boxBa.style.height = vdaH
})
function go_back(){
    router.go(-1)
}
function ding_dan(){
    router.push({
        name:'ding_dan'
    })
}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
.wu_liu{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.right{
    width: 318px;
    height: 100%;
    /* background-color: aqua; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.right>span{
    font-size: 15px;
}
.xia{
    width: 100%;
    overflow: scroll;
    background-color: #f2f3f5;
}
.main{
    width: 100%;
    /* height: 120%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f2f3f5;
}
.mag_one{
    width: 95%;
    height: 125px;
    background-color: #ffffff;
    margin-top: 6px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.one_side{
    width: 95%;
    height: 75%;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.state{
    display: flex;
    align-items: center;
}
.state>span{
    font-size: 15px;
}
.mag_side{
    width: 100%;
    height: 50px;
    /* background-color: blue; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zi{
    width: 277px;
    height: 100%;
    /* background-color: blanchedalmond; */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    word-break: break-all;
    -webkit-box-orient: vertical;
}
</style>